<script setup lang="ts">
import {delHanfu, getHanfuListByCondition, type hanfuDto, type HanFuVo} from "@/apis/hanfu/hanfu";
import type {Ref} from "vue-demi";
import {useDict} from "@/hooks/app";
import {h, ref} from "vue";
import { Notification } from '@arco-design/web-vue';
import HanfuFormData from "@/views/hanfu/view/HanfuFormData.vue";
import {useUserStore} from "@/stores";
import type {img} from "@/components/ImgUpload/index.vue";

const title = ref('')
const src = ref('')
/**
 * add
 * up
 * */
const api = ref('')


const query = reactive({
  hanFuTypeName: null,
  hanFuName: null,
  hanFuStatus: null,
  pageNum:1,
  pageSize:20,
  total : 0
})

const scrollbar = ref(true);
const scroll = {
  x: 1200,
  y: 650
};


const selectList = ref([])

const data:Ref<HanFuVo[]> = ref([])

const visible = ref(false);


/**
 * 获取数据
 */
const getList = () => {
  getHanfuListByCondition(query).then(res => {
    data.value = res.data["data"].records
    query.total = res.data["data"].total
    let dict = useDict("UTF_8");
    // console.log(dict.UTF_8.value)
  })
}

/**
 * 汉服dto
 */
const hanFuDto:Ref<hanfuDto> = ref({
  id:0,
  typeId:0,
  typeName:'',
  name:'',
  price: '',
  ossId:0,
  description: "",
  updataBy:useUserStore().userInfo.id,
  status:0,
  file: []
})

/**
 * 汉服图片列表
 */
const hanFuImg:Ref<img[]> = ref([])

/**
 * 新增按钮
 * */
const handleClick = () => {
  api.value = 'add'
  title.value = '新增汉服'
  visible.value = true;
};

/**
 * 修改按钮
 * */
const updataClick = (data:any) => {
  api.value = 'up'
  title.value = '修改汉服'
  visible.value = true;

  hanFuDto.value.name = data.name
  hanFuDto.value.id = data.id
  hanFuDto.value.description = data.description
  hanFuDto.value.price = data.price + ""
  hanFuDto.value.typeId = data.typeId
  hanFuDto.value.status = data.status
  hanFuDto.value.file = data.file
  hanFuDto.value.typeName = data.typeName

  for (let i = 0; i < data.file.length; i++) {
    hanFuImg.value.push({
      id: data.file[i].ossId,
      src: import.meta.env.VITE_API_BASE_URL + data.file[i].clientUrl,
      isNow: false
    })
  }

  console.log(data)
};


/**
 * 删除按钮
 * */

const deleteClick = (data:any) => {

  if (data != null && data.id != null){

    delHanfu([data.id]).then(res => {

      Notification.success({
        title: '删除成功',
        content: 'delete success!',
        duration: 3000,
      })
      getList()

    })

  }else {


    delHanfu(selectList.value).then(res => {

      Notification.success({
        title: '删除成功',
        content: 'delete success!',
        duration: 3000,
      })
      getList()

    })

  }

}

getList()

</script>

<template>
  <div class="main">
    <a-space direction="vertical" :size="16" class="grid" >

      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="query.hanFuName" placeholder="汉服名称" /></a-col>
        <a-col :span="2" class="row"><a-input v-model="query.hanFuTypeName" placeholder="汉服类型名称" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="query.hanFuStatus" placeholder="请选择状态">
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>

      <a-row justify="start" >
        <a-space size="small">
          <a-col :span="1"><a-button type="primary" @click="handleClick" >新增</a-button></a-col>
          <a-col :span="21"><a-button type="outline" @click="deleteClick(null)" status="danger" :disabled="selectList.length == 0">删除</a-button></a-col>
        </a-space>
      </a-row>

      <a-table :data="data" row-key="id" :row-selection="selectList"
               :scroll="scroll" :scrollbar="scrollbar"
               v-model:selectedKeys="selectList" :pagination="false"
               style="background-color: white;">
        <template #columns>
          <a-table-column title="编号" data-index="id"></a-table-column>
          <a-table-column ellipsis="true" title="名称" data-index="name"></a-table-column>
          <a-table-column ellipsis="true" title="类型" data-index="typeName"></a-table-column>
          <a-table-column title="价格" data-index="price"></a-table-column>
          <a-table-column title="状态" data-index="status">
            <template #cell="{record}">
              <a-tag v-if="record.status == 1" color="green">上架</a-tag>
              <a-tag v-if="record.status == 0" color="red">下架</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="上传者" data-index="updataBy"></a-table-column>
          <a-table-column title="上传时间" data-index="updataTime"></a-table-column>
          <a-table-column title="操作">
            <template #cell="{record}">
              <a-button type="text" @click="updataClick(record)">修改</a-button>
              <a-button type="text" @click="deleteClick(record)" status="danger">删除</a-button>
            </template>
          </a-table-column>
        </template>

        <template #footer>
          <a-pagination v-model:current="query.pageNum" :total="query.total"
                        v-model:page-size="query.pageSize" @page-size-change="getList"
                        @change="getList"
                        show-total show-jumper show-page-size/>
        </template>
      </a-table>
    </a-space>
    <hanfu-form-data v-model:visible="visible" v-model:dto="hanFuDto"
                     v-model:img="hanFuImg" @ok="getList"
                     :title="title"/>
  </div>
</template>

<style scoped lang="scss">
.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>
